<template>
    <div>
        <div class="nav-tabs-container">
            <div @click="eventTab(datum)" class="item" :class="{active: datum.active}" v-for="datum in data"><span>{{datum.label}}</span></div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'NavTab',
        props: ['data'],
        data() {
            return {}
        },
        created() {
        },
        mounted() {

        },
        methods: {
            eventTab(datum) {
                this.data.forEach(function (item) {
                    item.active = false;
                });
                datum.active = true;
                this.$emit('handle', datum)
            }
        },
    }
</script>
<style>
    .nav-tabs-container {
        display: flex;
        width: 100%;
        /*height: 50px;*/
        background-color: #fff;
        overflow-x: scroll;
        overflow-y: hidden;
        /* overflow: auto; */
        white-space: nowrap;
    }

    .nav-tabs-container::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs-container .item {
        display: inline-block;
        flex: 1;
        padding: 20px 0 10px 0;
        /*margin-right: 20px;*/
        position: relative;
        font-size: 16px;
        text-align: center;
    }

    .nav-tabs-container .item:nth-child(1) {
        /*margin-left: 20px;*/
    }

    .nav-tabs-container span {
        position: relative;
    }

    .nav-tabs-container div.active span:after {
        content: ' ';
        position: absolute;
        bottom: -13px;
        left: 10%;
        width: 80%;
        height: 4px;
        border-radius: 2px;
        background-color: rgb(214, 111, 84);
    }

</style>
